<template>
	<view class="start">
		<!-- <nav-bar background="#FFFFFF" @init="navInit">
			<template slot="title">
				<view class="head-title">
					<image src="/static/logo.png" mode="widthFix"></image>
				</view>
			</template>
		</nav-bar> -->
		<view class="back-home" :style="{top: top}" @click="goHome">
			<text class="iconfont icon-xiaofangzi"></text>
		</view>
		<view class="agent-start"  :style="{top: stickyTop}">
			<image class="agent-logo" src="../../../static/agent-logo.png" mode="widthFix"></image>
			<image src="../../../static/agent-start.png" mode="widthFix"></image>
		</view>
		<view class="content">
			<view class="item-card">
				<view class="card-head">
					<view class="">贝贝享飞无人机租赁平台</view>
					<view class="flex align-center" style="gap: 16rpx;">
						<text class="iconfont icon-luyin"></text>
						<text class="iconfont icon-sanjiaoxing"></text>
						<text class="iconfont icon-tx-fill-zhengfangxing"></text>
					</view>
				</view>
				<view class="card-content">
					<view class="item-content">
						<view class="body-text">
							<view>我们要做一个针对全国高校的无人机免押金租赁项目，招校园服务商，由你来负责帮我们对接你们学校有租赁需求的同学，从而可以赚取租金分成。</view>
							<view>下面是常见问题，我们一一回答。</view>						</view>
					</view>
				</view>
			</view>
			<view class="item-card">
				<view class="card-head">
					<view class="">贝贝享飞无人机租赁平台</view>
					<view class="flex align-center" style="gap: 16rpx;">
						<text class="iconfont icon-luyin"></text>
						<text class="iconfont icon-sanjiaoxing"></text>
						<text class="iconfont icon-tx-fill-zhengfangxing"></text>
					</view>
				</view>
				<view class="card-content">
					<view class="flex" style="padding-bottom: 24rpx;">
						<view class="card-title">项目初心</view>
					</view>
					<view class="item-content">
						<view class="item-num">01</view>
						<view class="body-text">
							<view class="">让喜欢大疆但是暂时买不起的，或者需要大疆的设备完成学业的同学，都可以低价且免押金的租到大疆的产品。</view>						</view>
					</view>
					<view class="item-content">
						<view class="item-num">02</view>
						<view class="body-text">
							<view class="">学生服务商本人也可以获取社会实践以及赚点生活费的机会。</view>						</view>
					</view>
					<view class="item-content">
						<view class="item-num">03</view>
						<view class="body-text">
							<view class="">我们也可以尽可能让我们闲置的设备流动起来。</view>						</view>
					</view>
				</view>
			</view>
			<!-- <view class="item-card">
				<view class="card-head">
					<view class="">贝贝享飞无人机租赁平台</view>
					<view class="flex align-center" style="gap: 16rpx;">
						<text class="iconfont icon-luyin"></text>
						<text class="iconfont icon-sanjiaoxing"></text>
						<text class="iconfont icon-tx-fill-zhengfangxing"></text>
					</view>
				</view>
				<view class="card-content">
					<view class="flex" style="padding-bottom: 24rpx;">
						<view class="card-title">为什么必须是大学生？</view>
					</view>
					<view class="item-content">
						<view class="body-text">
							<view class="">大学生接受新鲜事物的能力强，但是生活费不多，买一台大疆可能经济压力大，但是租一台，并且不需要押金，还有本校同学可以教学的情况下，都愿意去试试。</view>						</view>
					</view>
				</view>
			</view> -->
			<view class="item-card">
				<view class="card-head">
					<view class="">贝贝享飞无人机租赁平台</view>
					<view class="flex align-center" style="gap: 16rpx;">
						<text class="iconfont icon-luyin"></text>
						<text class="iconfont icon-sanjiaoxing"></text>
						<text class="iconfont icon-tx-fill-zhengfangxing"></text>
					</view>
				</view>
				<view class="card-content">
					<view class="" style="padding-bottom: 24rpx;">
						<view class="flex">
							<view class="card-title">我要投入资金么？</view>
						</view>
						<view class="flex">
							<view class="card-title">投多少？有无风险？</view>
						</view>
					</view>
					<view class="item-content">
						<view class="item-num">01</view>
						<view class="body-text">
							<view class="">最低只需要投入1万元，用于购买设备，来组建你的在校初始库存。选什么产品你可以自由搭配，我们也会告诉你什么产品在租赁时更受欢迎。</view>						</view>
					</view>
					<view class="item-content">
						<view class="item-num">02</view>
						<view class="body-text">
							<view class="">我们提供上百万的货供你调用，包含行业级和消费级无人机，稳定器，运动相机，手持云台，麦克风等大疆在售产品，不收取任何加盟费。</view>
							<view class="">而且不做了，你的那点货日后还能卖掉，大疆的产品比较保值，亏不了多少。</view>						</view>
					</view>
					<view class="item-content">
						<view class="item-num">03</view>
						<view class="body-text">
							<view class="">如果你本来就要买一台御3pro，本来就要花1w多，不管你加不加入，出二手的时候都会亏一点吧？</view>
							<view class="">那为什么不顺便让它为你多做点贡献？</view>
							<view class="">加入这个项目尝试一下呢？</view>						</view>
					</view>
				</view>
			</view>
			<view class="item-card">
				<view class="card-head">
					<view class="">贝贝享飞无人机租赁平台</view>
					<view class="flex align-center" style="gap: 16rpx;">
						<text class="iconfont icon-luyin"></text>
						<text class="iconfont icon-sanjiaoxing"></text>
						<text class="iconfont icon-tx-fill-zhengfangxing"></text>
					</view>
				</view>
				<view class="card-content">
					<view class="flex" style="padding-bottom: 24rpx;">
						<view class="card-title">怎么定租金？怎么分成？</view>
					</view>
					
					<view class="padding-t32">分为2种情况</view>
					<view class="item-content">
						<view class="item-num">01</view>
						<view class="body-text">
							<view class="">如果租出去的是你自己的初始库存</view>
							<view class="">那么每单租金收官网价千分之三，叫优惠价</view>
							<view class="">此时你提80%。</view>
						</view>
					</view>
					<view class="item-content">
						<view class="item-num">02</view>
						<view class="body-text">
							<view class="">如果租出去的是总部提供的货</view>
							<view class="">那么每单租金收百分之一，叫原价</view>
							<view class="">此时你提25%。</view>
						</view>
					</view>
					<view class="padding-t16 padding-b24">下面我们用御3pro套装举个例子↓</view>
						
					<view class="table">
						<view class="t-head">
							<view class="tr">
								<view class="th">项目</view>
								<view class="th">初始库存(优惠价)</view>
								<view class="th">总部提供货(原价)</view>
							</view>
						</view>
						<view class="t-body">
							<view class="tr">
								<view class="td">设备名称</view>
								<view class="td">御3 Pro套装</view>
								<view class="td">御3 Pro套装</view>
							</view>
							<view class="tr">
								<view class="td">零售价</view>
								<view class="td">¥17688</view>
								<view class="td">¥17688</view>
							</view>
							<view class="tr">
								<view class="td">租金比例</view>
								<view class="td">官网价的 3‰</view>
								<view class="td">
									<view class="">
										官网价的 <text class="red-color">1%</text>
									</view>
								</view>
							</view>
							<view class="tr">
								<view class="td">
									<view class="">日租金</view>
									<view class="formula">(3天起租)</view>
								</view>
								<view class="td">
									<view class="">¥53</view>
									<view class="formula">¥17688x0.003</view>
								</view>
								<view class="td">
									<view class="red-color">¥176.8</view>
									<view class="formula">¥17688x0.01</view>
								</view>
							</view>
							<!-- <view class="tr">
								<view class="td">最低租赁天数</view>
								<view class="td">3天</view>
								<view class="td">3天</view>
							</view> -->
							<view class="tr">
								<view class="td">支付总租金</view>
								<view class="td">
									<view class="">￥159</view>
									<view class="formula">¥53x3</view>
								</view>
								<view class="td">
									<view class="red-color">￥530</view>
									<view class="formula">¥176.8x3</view>
								</view>
							</view>
							<view class="tr">
								<view class="td">你的提成比例</view>
								<view class="td">80%</view>
								<view class="td red-color">25%</view>
							</view>
							<view class="tr">
								<view class="td">你的单笔佣金</view>
								<view class="td">
									<view class="">￥127</view>
									<view class="formula">¥159x0.8</view>
								</view>
								<view class="td">
									<view class="red-color">￥132.5</view>
									<view class="formula">¥530x0.25</view>
								</view>
							</view>
							<view class="tr">
								<view class="td">优势</view>
								<view class="td">低租金</view>
								<view class="td">投入少、风险小，无库存压力</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="item-card">
				<view class="card-head">
					<view class="">贝贝享飞无人机租赁平台</view>
					<view class="flex align-center" style="gap: 16rpx;">
						<text class="iconfont icon-luyin"></text>
						<text class="iconfont icon-sanjiaoxing"></text>
						<text class="iconfont icon-tx-fill-zhengfangxing"></text>
					</view>
				</view>
				<view class="card-content">
					<view class="" style="padding-bottom: 24rpx;">
						<view class="flex">
							<view class="card-title">我需要做什么？</view>
						</view>
						<view class="flex">
							<view class="card-title">能挣到钱么？</view>
						</view>
					</view>
					<view class="item-content">
						<view class="item-num">01</view>
						<view class="body-text">
							<view class="">每个学校起码上万人，不管学生老师都是你的目标客户，你要做的就是，按照我们的方法进行推广和运营，尽可能的挖掘你们学校的潜力，把你的租赁业务宣传出去，客户自然就来了。</view>
						</view>
					</view>
					<view class="item-content">
						<view class="item-num">02</view>
						<view class="body-text">
							<view class="">特别是几乎每个学校都有摄影协会，也有传媒学院吧，经常要拍作业，拍毕业作品，出去旅游，五一，中秋，国庆，寒暑假，都是租赁旺季！</view>
						</view>
					</view>
					<view class="item-content">
						<view class="item-num">03</view>
						<view class="body-text">
							<view class="">但是每个人用心程度不同，结果肯定不同。只要你想好好做，我们都会为你提供运营指导。</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item-card">
				<view class="card-head">
					<view class="">贝贝享飞无人机租赁平台</view>
					<view class="flex align-center" style="gap: 16rpx;">
						<text class="iconfont icon-luyin"></text>
						<text class="iconfont icon-sanjiaoxing"></text>
						<text class="iconfont icon-tx-fill-zhengfangxing"></text>
					</view>
				</view>
				<view class="card-content">
					<view class="" style="padding-bottom: 24rpx;">
						<view class="flex">
							<view class="card-title">什么流程？</view>
						</view>
					</view>
					<view class="item-content">
						<view class="item-num">01</view>
						<view class="body-text">
							<view class="">很简单，支付定金，签订合同，付尾款，选择你的初始库存，我们会帮你发货，就直接打开你的创业大门了。</view>
						</view>
					</view>
					<view class="item-content">
						<view class="item-num">02</view>
						<view class="body-text">
							<view class="">后期全部用小程序，给你开管理员账号，方便你管理出入。</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item-card">
				<view class="card-head">
					<view class="">贝贝享飞无人机租赁平台</view>
					<view class="flex align-center" style="gap: 16rpx;">
						<text class="iconfont icon-luyin"></text>
						<text class="iconfont icon-sanjiaoxing"></text>
						<text class="iconfont icon-tx-fill-zhengfangxing"></text>
					</view>
				</view>
				<view class="card-content">
					<view class="" style="padding-bottom: 24rpx;">
						<view class="flex">
							<view class="card-title">如果租出去的设备有损坏</view>
						</view>
						<view class="flex">
							<view class="card-title">或者飞丢了怎么办？</view>
						</view>
					</view>
					<view class="item-content">
						<view class="item-num">01</view>
						<view class="body-text">
							<view class="">我们会给你提供一份租赁协议，里面都规定了各种情况的解决办法，有损失都是租客自己承担的，你不用担心，都会保护好咱们的合理权益。</view>
						</view>
					</view>
					<view class="item-content">
						<view class="item-num">02</view>
						<view class="body-text">
							<view class="">而且，我们所有设备都必须购买随心换保险，租客也能固定自己的最大成本，基本都能接受的。</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item-card">
				<view class="card-head">
					<view class="">贝贝享飞无人机租赁平台</view>
					<view class="flex align-center" style="gap: 16rpx;">
						<text class="iconfont icon-luyin"></text>
						<text class="iconfont icon-sanjiaoxing"></text>
						<text class="iconfont icon-tx-fill-zhengfangxing"></text>
					</view>
				</view>
				<view class="card-content">
					<view class="" style="padding-bottom: 24rpx;">
						<view class="flex">
							<view class="card-title">如果我毕业了怎么办？</view>
						</view>
					</view>
					<view class="item-content">
						<!-- <view class="item-num">01</view> -->
						<view class="body-text">
							<view class="">那需要经我们同意后转给下一届同学。</view>
							<view class="">详细见合作协议。</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item-card">
				<view class="card-head">
					<view class="">贝贝享飞无人机租赁平台</view>
					<view class="flex align-center" style="gap: 16rpx;">
						<text class="iconfont icon-luyin"></text>
						<text class="iconfont icon-sanjiaoxing"></text>
						<text class="iconfont icon-tx-fill-zhengfangxing"></text>
					</view>
				</view>
				<view class="card-content">
					<view class="" style="padding-bottom: 24rpx;">
						<view class="flex">
							<view class="card-title">要不要告诉家长？</view>
						</view>
					</view>
					<view class="item-content">
						<!-- <view class="item-num">01</view> -->
						<view class="body-text">
							<view class="">我们鼓励你告知你的家长😀利用业余时间做点兼职挣点生活费，应该没有人不同意吧。</view>
							<view class="">再说了，一个成年人，要自己为自己的生活做决定并承担责任哦！</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer-btns">
			<block v-if="!loading">
				<button v-if="info.is_agent === -1 || info.is_agent === 0" class="confirm-btn flex-1" @click="goAgent">立即申请校园服务商</button>
				<button v-else-if="info.is_agent === 1" class="confirm-btn flex-1" @click="goHome">您已经成为代理商</button>
				<button v-else-if="info.is_agent === 100" class="confirm-btn flex-1" @click="goAgentBaseInfo">代理商申请资料未提交,待支付定金</button>
				<button v-else-if="info.is_agent === 101" class="confirm-btn flex-1" @click="goAgentBaseInfo">代理商申请资料审核中</button>
				<button v-else-if="info.is_agent === 102" class="confirm-btn flex-1" @click="goAgentBaseInfo">代理商资料已通过,待激活</button>
			</block>
			<block v-else>
				<button class="confirm-btn flex-1">立即申请校园服务商</button>
			</block>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	
	export default {
		data() {
			return {
				stickyTop: 0,
				top: '0px',
				statusBarHeight: 20,
				navBarHeight: 45,
				info: {},
				loading: true
			};
		},
		computed: {
			...mapState('login', ['is_login_verify', 'is_bind_phone', 'is_bind_wx', 'token'])
		},
		watch: {
			is_bind_phone() {
				if (this.token) {
					this.getMyInfo()
				}
			}
		},
		onLoad() {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度
			this.statusBarHeight = info.statusBarHeight
			this.windowWidth = info.windowWidth
			// h5 app mp-alipay
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
			this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight) + 4
			this.windowWidth = menuButtonInfo.left
			// #endif
			// #ifdef MP-ALIPAY
			this.statusBarHeight = 0
			// #endif
			this.top = this.statusBarHeight+(this.navBarHeight/2)+'px'
		},
		onShow() {
			if (this.token) {
				this.getMyInfo()
			}
		},
		onShareAppMessage() {},
		onShareTimeline() {},
		methods: {
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goAgentBaseInfo() {
				uni.navigateTo({
					url: '/pages/agent/base-info/base-info'
				})
			},
			// 获取我的信息
			getMyInfo() {
				this.loading = true
				this.$api.myInfoApi({}, {loading: true}).then(res => {
					this.$store.commit('login/SET_USER_INFO', res.data)
					this.info = res.data
					// if (this.info.is_agent === 1) {
					// 	uni.switchTab({
					// 		url: '/pages/index/index'
					// 	})
					// }
				}).catch(err=> {
					console.log('err', err);
				}).finally(()=> {
					this.loading = false
				})
			},
			navInit(val) {
				this.stickyTop = val
			},
			goAgent() {
				uni.navigateTo({
					url: '/pages/agent/agent'
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.head-title {
		position: relative;
		font-family: Alimama ShuHeiTi;
		font-size: 18px;
		font-weight: 700;
		line-height: 21.6px;
		text-align: left;
		color: #000000;
		
		image {
			width: 132rpx;
			height: 32rpx;
		}
	}
	
	.back-home {
		position: fixed;
		left: 32rpx;
		z-index: 999;
		width: 62rpx;
		height: 62rpx;
		display: flex;
		border-radius: 50%;
		align-items: center;
		justify-content: center;
		transform: translateY(-50%);
		border: 1px solid rgba(0, 0, 0, 0.32);
		background-color: rgba(0, 0, 0, 0.3);
		
		.icon-xiaofangzi {
			font-size: 36rpx;
		}
	}
	
	.start {
		position: relative;
		flex: 1;
		width: 100%;
		padding-top: 650rpx;;
		background-color: #1E9BFF;
		padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		
		.agent-start {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			
			image {
				width: 100%;
			}
			
			.agent-logo {
				position: absolute;
				left: 12rpx;
				top: 12rpx;
				width: 200rpx;
			}
		}
		
		.content {
			// position: absolute;
			// top: 650rpx;
			// left: 0;
			// right: 0;
			// width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;
		}
		
		.item-card {
			position: relative;
			width: 100%;
			padding: 16rpx;
			padding-top: 70rpx;
			margin-bottom: 32rpx;
			border-radius: 24rpx;
			box-sizing: border-box;
			background-color: #b1edff;
			
			
			font-size: 28rpx;
			font-weight: 500;
			line-height: 36rpx;
			color: #000000;
			font-family: SourceHanSansSC-Regular-2;
			
			.card-head {
				position: absolute;
				top: 8rpx;
				left: 8rpx;
				right: 8rpx;
				
				color: #36C1A7;
				font-size: 22rpx;
				line-height: 32rpx;
				padding: 16rpx 52rpx;
				border-radius: 24rpx 24rpx 0 0;
				background: linear-gradient(90deg, rgba(84,239,155,1) 9%, rgba(56,219,196,1) 94%);
				
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			
			.card-content {
				padding: 32rpx;
				box-sizing: border-box;
				// background-color: #FFFFFF;
				border-radius: 0 0 24rpx 24rpx;
				background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 54%, rgba(220,255,251,0.8) 90%, rgba(216,255,251,0.8) 100%);
			}
		}
		
		.card-title {
			position: relative;
			z-index: 9;
			color: #000000;
			font-size: 42rpx;
			font-weight: 700;
			line-height: 56rpx;
			font-family: 'SourceHanSansSC-Bold-2';
			
			&::after {
				position: absolute;
				content: '';
				left: 0;
				bottom: 0;
				width: 105%;
				z-index: -1;
				height: 28rpx;
				border-radius: 99px;
				background-color: #B0E8E0;
			}
		}
		
		.item-content {
			padding-top: 32rpx;
			padding-bottom: 32rpx;
			border-bottom: 1px dashed #000000;
			
			&:last-child {
				border-bottom: none;
			}
		}
		
		.item-num {
			font-size: 36rpx;
			line-height: 36rpx;
			color: #000000;
			padding-bottom: 12rpx;
			font-family: AaHouDiHei-2;
		}
		
		.body-text {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 36rpx;
			color: #000000;
			font-family: SourceHanSansSC-Regular-2;
			
			display: flex;
			flex-direction: column;
			gap: 8rpx;
		}
		
		.item-title {
			font-size: 36rpx;
			font-weight: 600;
			line-height: 46rpx;
			color: #000000;
			font-family: 'SourceHanSansSC-Bold-2';
		}
		
		.sub-hint {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 36rpx;
			padding-top: 16rpx;
			color: rgba(0, 0, 0, 0.4);
			font-family: SourceHanSansSC-Regular-2;
		}
		
		.table {
			width: 100%;
			overflow: hidden;
			border-radius: 16rpx;
			border: 1px solid rgba(0, 0, 0, 0.1);
			
			.tr {
				width: 100%;
				display: grid;
				grid-template-columns: 1.5fr 2.5fr 2.5fr;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			}
			
			.td, .th {
				min-height: 68rpx;
				
				padding: 16rpx;
				font-size: 26rpx;
				line-height: 36rpx;
				box-sizing: border-box;
				border-right: 1px solid rgba(0, 0, 0, 0.1);
				overflow-wrap: break-word;
				word-wrap: break-word;
				white-space:normal;
				word-break:break-all;
				word-wrap:break-word;
				
				display: flex;
				flex-direction: column;
				justify-content: center;
				
				&:last-child {
					border-right: none;
				}
				
				&:first-child {
					flex-shrink: 0;
				}
				
				&:nth-child(1) {
					background-color: #1e9bff20;
				}
				
				.formula {
					color: rgba(0, 0, 0, 0.5);
					font-size: 22rpx;
				}
			}
			
			.t-body {
				.tr {
					&:last-child {
						border-bottom: none;
					}
				}
			}
		}
	}
	.footer-btns {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		z-index: 999;
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.05);
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	
		gap: 14rpx;
		display: flex;
		align-items: center;
	
		.confirm {
			flex: 1;
			height: 82rpx;
			border: 1px solid #1E9BFF;
			background: linear-gradient(74.62deg, #1E9BFF 42.24%, #1E9BFF 148.86%);
	
			font-size: 34rpx;
			font-weight: 400;
			line-height: 82rpx;
			text-align: center;
			color: #FFFFFF;
		}
	}
</style>
